<template>
    <div>
        <head-btn :page-title="page_title"></head-btn>
        <!-- 位置搜索 -->
        <div class="address pr">
            <i class="search_btn"></i>
            <input readonly type="text" placeholder="搜索附近公司、写字楼" class="custom-componet-input" id="custom-componet-input">
        </div>
        <!-- 地图展示 -->
        <div class="amap-page-container">
            <el-amap vid="amap"  :zoom="zoom" class="amap-demo"  :amapManager="amapManager" :events="events">
                <el-amap-circle 
                :center= "circle.center" 
                :stroke-opacity= "circle.strokeOpacity"
                :fill-color= "circle.fillColor"
                :stroke-color= "circle.strokeColor"
                :stroke-weight= "1"
                :radius= "circle.radius" :fill-opacity= "circle.fillOpacity" >
                </el-amap-circle>
                <el-amap-circle-marker 
                :center="circle.center" 
                :radius="10" 
                :fill-color="marker.color" 
                :stroke-color= "marker.color"
                :fill-opacity="1" 
                :stroke-weight="0"
                ></el-amap-circle-marker>
            </el-amap>

            
        </div>
        <!-- 查询地址列表 -->
        <div class="address_list">
            <div class="address_item pr" v-for="(item,index) in address_list"
            :key="item.id"
            :class="{'select': index == isselect}"
            @click="address_sel(index,item.location)"
            >
                <div class="address_banner">
                    {{item.name}}
                    <div class="address_det" v-if="index !== 0" >
                        {{item.address}}
                    </div>
                </div>
                <div class="cut_line"></div>
                <div class="address_select" ></div>
            </div>
        </div>
    </div>
</template>

<script>
import HeadBtn from './common/headBtn/HeadBtn'
import {AMapManager} from "vue-amap"
let amapManager=new AMapManager();

export default {
    name: "MapPosition",
    data () {
        let self = this;
        return {
          page_title: '考勤位置',
          center: [121.59996, 31.197646],
          zoom: 16,
          loaded: false,
          address:null,
          address_list: null,
          isselect: 0,
          marker: {
              color: "#2FB3FC"
          },
          amapManager,
          circle: 
            {
              center: [121.59996, 31.197646],
              radius: self.$route.params.id.split('米')[0],
              fillOpacity: 0.1,
              fillColor: '#157CF8',
              strokeColor: '#157CF8',
              strokeOpacity: 0.5
            },
          events:{
            init(o){
                self.map=o;
                // 定点移动
                AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
                var positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: o
                });
                positionPicker.on('success', function(positionResult){
                    // self.result=positionResult.regeocode.pois;
                    self.address=positionResult.regeocode.formattedAddress;
                    self.center=[positionResult.position.lng,positionResult.position.lat];
                    self.circle.center= [positionResult.position.lng,positionResult.position.lat];
                    var cpoint = self.center; //中心点坐标
                    placeSearch.searchNearBy('', cpoint, 1000, function(status, result) {
                    
                    if(result.info == 'OK'){
                        self.address_list = result.poiList.pois;
                    }
                });
                });
                positionPicker.on('fail', function(){
                    console.log('fail');
                });
                positionPicker.start();
                });
                // poi搜索
                var placeSearch = new AMap.PlaceSearch({
                    type: '汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|公共设施'
                    
                });
        
                
                
            }
          }
        }
    },
    components: {
        HeadBtn
    },
    mounted () {

    },
    methods: {
        // 位置选择
        address_sel(index, value) {
            this.isselect = index;
            this.center = [value.lng,value.lat];
            this.circle.center = [value.lng,value.lat];
            this.map.center = [value.lng,value.lat];
            this.map.setCenter(this.map.center);
            this.isselect = 0;
        }
    }
}
</script>

<style scoped lang="less">
.address{
    width: 5.64rem;
    margin: auto;
    padding: 0.14rem 0;
    .search_btn{
        position: absolute;
        width: 0.22rem;
        height: 0.22rem;
        top: 0.38rem;
        left: 0.28rem;
        background: url("/static/images/map_select/Group 3@3x.png") center;
        background-size: cover;
    }
    input{
        width:5.64rem;
        height:0.69rem;
        line-height: 0.69rem;
        font-size: 0.31rem;
        background:rgba(243,243,243,1);
        border-radius:0.17rem;
        box-sizing: border-box;
        padding: 0 0.7rem;
    }
    input::-webkit-input-placeholder{
        color: rgba(213,213,213,1);
    }
}
.amap-demo{
    width: 100%;
    height: 4.31rem;
}
.address_item{
    height: 1.17rem;
    font-size: 0.28rem;
    padding: 0 0.41rem;
    overflow: hidden;
    &:nth-child(1){
        line-height: 1.17rem;
        .address_banner{
            padding-top: 0;
        }
    }
    .address_banner{
        height: 1.14rem;
        padding-top: 0.20rem;
    }
    .address_det{
        font-size: 0.24rem;
        color: #A1A1A1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cut_line{
        height:0.03rem;
        background-color: rgba(240,240,240,1);
    }
    .select .address_select{
        position: absolute;
        right: 0.41rem;
        top: 0.38rem;
        width: 0.34rem;
        height: 0.34rem;
        background: url('/static/images/map_select/ccw_kqdk_add_check@3x.png') center;
        background-size: cover;
    }
}
.address_item.select .address_select{
        position: absolute;
        right: 0.41rem;
        top: 0.38rem;
        width: 0.34rem;
        height: 0.34rem;
        background: url('/static/images/map_select/ccw_kqdk_add_check@3x.png') center;
        background-size: cover;
}
</style>


